<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="bower_components/vue/dist/vue.js"></script>
	<script src="bower_components/vue-router/dist/vue-router.js"></script>
	<style>
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li>
				<a v-link="{path:'/home'}">主页</a>
			</li>
			<li>
				<a v-link="{path:'/news'}">新闻</a>
			</li>
		</ul>
		<div>
			<router-view></router-view>
		</div>	
	</div>

	<script>
		//1. 准备一个根组件
		var App=Vue.extend();

		//2. Home News组件都准备
		var Home=Vue.extend({
			template:'<h3>我是主页</h3>'
		});

		var News=Vue.extend({
			template:'<h3>我是新闻</h3>'
		});

		//3. 准备路由
		var router=new VueRouter();

		//4. 关联
		router.map({
			'home':{
				component:Home
			},
			'news':{
				component:News
			}
		});

		//5. 启动路由
		router.start(App,'#box');

		//6. 跳转
		router.redirect({
			'/':'/home'
		});
	</script>
</body>
</html>